<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>抽奖环节</title>
    <link href="./bootstrap.min.css" rel="stylesheet">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="./jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="./bootstrap.min.js"></script>
</head>
<style>

    .main{
            width: 100vw;
            height: 100vh;
            background-image:url('./bg.jpeg');
            background-size:100% 100%;
            background-repeat:no-repeat;
     }
     .none{
         width: 100%;
         height: 300px;
     }
        .value{
            text-align: center;
            /* width: 1000px; */
            line-height: 450px;
            font-size: 220px;
            /* margin-left: 30px; */
        }
        .val-box{
            width: 100%;
            height: 300px;
            /* padding-top: 100px; */
            /* margin: 0 auto; */
            /* display: flex; */
        }
        .bottons{
            width: 300px;
            height: 100px;
            /* margin: 0 auto; */
            display: flex;
            justify-content:center;
            /* margin-top: 100px; */
            position: absolute;
            top: 470px;
            right: 340px;
        }
        .res-box{
            height: 200px;
            width: 1200px;
            margin: 0 auto;
            margin-top: 150px;
            text-align: left;
            line-height: 100px;
            font-size: 75px;
        }
        .res{
            word-wrap:break-word;
        }
        .modal.fade.in{
            top:200px;  
        }
    </style>

<body>
    <div class="main">
        <div class="none"></div>
        <div class="val-box">
            <p class="value">0</p>
        </div>
        <div class="bottons">
            <button type="button" onclick="start()" class="btn btn-info" style="height:65px;width:125px;margin-right: 30px;"
                id="startBtn">开始</button>
            <button type="button" onclick="extracting()" class="btn btn-success" style="height:65px;width:125px;">抽取</button>
        </div>
        <div class="res-box">
            <p class="res">幸运者： </p>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <!-- <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> -->
                    <h4 class="modal-title" id="myModalLabel">请设置抽取范围</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="exampleInputEmail1">抽取范围</label>
                        <input type="number" class="form-control" id="scope" placeholder="范围">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" onclick="saveChanges()">确认</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        var lucky = [];
        var vue = '';
        var myVar = '';
        var scope = 400;
        $(function () {
            $('#myModal').modal({
                show: true,
                backdrop: 'static',
                keyboard: false
            });
        });

        function saveChanges() {
            let sc = $('#scope').val();
            if (sc) {
                scope = sc;
                $('#myModal').modal('toggle');
            }
            console.log(sc);
        }

        function random(lower, upper) {
            return Math.floor(Math.random() * (upper - lower + 1)) + lower;
        }

        function start() {
            if (myVar) {
                return;
            }
            myVar = setInterval(function () {
                let res = random(1, scope);
                console.log(res);
                if (this.check(res)) {
                    this.start();
                } else {
                    this.vue = res;
                    $("p.value").text(res);
                }
            }, 100);

        }

        function check(val) {
            for (const it of this.lucky) {
                if (val == it) {
                    return true;
                } else {
                    return false;
                }
            }
        }

        function extracting() {
            if (myVar && this.vue) {
                clearInterval(myVar);
                myVar = '';
                this.lucky.push(this.vue);
                $("p.res").text("幸运者：" + this.lucky);
                console.log(this.lucky);
                this.vue = '';
                $("#startBtn").text("继续");
            }
        }
    </script>
</body>

</html>